<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,user-scalable=no,minimal-ui">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="img/asset-favico.ico">
    <title>登录</title>
    <link rel="stylesheet" href="css/page-health-login.css"/>
    <link rel="stylesheet" href="plugins/elementui/index.css"/>
    <script src="plugins/jquery/dist/jquery.min.js"></script>
    <script src="plugins/healthmobile.js"></script>
    <script src="plugins/vue/vue.js"></script>
    <script src="plugins/vue/axios-0.18.0.js"></script>
    <script src="plugins/elementui/index.js"></script>
    <script src="js/common.js"></script>
</head>
<body data-spy="scroll" data-target="#myNavbar" data-offset="150">
<div class="app" id="app">
    <!-- 页面头部 -->
    <div class="top-header">
        <span class="f-left"><i class="icon-back"></i></span>
        <span class="center">传智健康</span>
        <span class="f-right"><i class="icon-more"></i></span>
    </div>
    <div class="carousel">
        <div class="banner-roll">
            <div class="banner-item">
                <!-- 页面头部 -->
                <div class="item" style="background-image: url(./img/widget-banner3.jpg);"><img
                        src="./img/widget-banner3.jpg" alt=""></div>
            </div>
            <div class="indicators"></div>
        </div>
        <!-- 页面内容 -->
        <div class="contentBox">
            <div class="login fade-in">
                <div class="banner-title">医疗服务平台</div>
                <form id='login-form'>
                    <div class="input-row">
                        <label>手机号</label>
                        <div class="loginInput">
                            <input v-model="loginInfo.telephone" id='account' type="text" placeholder="请输入手机号">
                            <input id="validateCodeButton" @click="sendValidateCode()" type="button"
                                   style="font-size: 12px"
                                   value="获取验证码">
                        </div>
                    </div>
                    <div class="input-row">
                        <label>验证码</label>
                        <div class="loginInput">
                            <input v-model="loginInfo.validateCode" style="width:80%" id='password' type="password"
                                   placeholder="请输入验证码">
                        </div>
                    </div>
                    <div class="input-row" style="font-size: 12px">
                        <input type="checkbox" checked>
                        阅读并同意《传智健康用户协议》《传智健康隐私条款》
                    </div>
                    <div class="btn yes-btn" @click="login()"><a href="#">登录</a></div>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
<!-- 修改 body 样式 -->
<style>
    body {
        margin: 0;
        padding: 0;
        background: linear-gradient(to bottom right, #f3f2f7, #ffffff);
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }
</style>

<script>

    var vue = new Vue({
        el: '#app',
        data: {
            loginInfo: {
                telephone: '18812345678',
                validateCode: '1234'
            }//登录信息
        },
        methods: {
            //发送验证码
            sendValidateCode() {
                let telephone = this.loginInfo.telephone;
                if (!checkTelephone(telephone)) {
                    this.$message.error('请输入正确的手机号');
                    return false;
                }
                validateCodeButton = $("#validateCodeButton")[0];
                clock = window.setInterval(doLoop, 1000); //一秒执行一次
                axios.post(`/validateCode/send4Login?telephone=${telephone}`).then((response) => {
                    if (!response.data.flag) {
                        //验证码发送失败
                        this.$message.error('验证码发送失败，请检查手机号输入是否正确');
                    }
                });
            },
            //登录
            login() {
                window.location.href = "./pages/index.html";
            }
        }
    });
</script>
</html>